<!-- 注册页 -->
<template>
	<view class="re_content">
		<view class="backColor"></view>
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 返回上一页 -->
		<view class="re_return">
			<image :src="HTTP_IMG_UTL + 'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode="" @click="handelReturn" />
			<view></view>
		</view>
		<!-- 注册成为GLUZ会员 文字 -->
		<view class="re_GLUZ_title">
			<view>
				<view>
					<span style="font-size: 50rpx;font-weight: bold;">{{ $t('忘记密码') }}</span>
				</view>
			</view>
		</view>
		<!-- form表单 -->
		<view class="re_form">
			<u-form labelPosition="top" :model="model" ref="uForm">

				<u-form-item prop="mobile">
					<view class="re_mobile">
						<view @click="handeleAreaCode" style="display: flex; align-items: center;margin-right: 14rpx;">
							<image class="ico" src="/static/img/chain.png" v-if="AreaCode == '+86'"></image>
							<image class="ico" src="/static/img/ru.png" v-else></image>
							<view class="re_mobile_87">{{ AreaCode }}</view>
							<image src="/static/img/xialaxx.png" style="width: 20rpx;height: 12rpx;" />
						</view>

						<!-- <view class="re_line" style="margin-right: 20rpx;"></view> -->
						<u-input type="number" maxlength="11" v-model="model.mobile" :placeholder="$t('请输入手机号')" clearable
							:border="border" />
					</view>
				</u-form-item>
				<u-form-item prop="email" v-if="indexID === 1" key="email">
					<view style="margin-right: 10rpx;">
						{{ $t('邮箱') }}
					</view>
					<u-input v-model="model.email" :placeholder="$t('请输入邮箱')" clearable :border="border" />
				</u-form-item>
				<u-form-item prop="password">
					<view style="margin-right: 10rpx;">
						{{ $t('登录密码') }}
					</view>
					<u-input :type="type" v-model="model.password" :placeholder="$t('8-20位字母、数字，符号组合')" clearable
						:border="border" />
				</u-form-item>
				<u-form-item prop="newpassword">
					<view style="margin-right: 10rpx;">
						{{ $t('再次确认密码') }}
					</view>
					<u-input :type="type" v-model="model.newpassword" :placeholder="$t('请再次确认密码')" clearable :border="border" />
				</u-form-item>

				<u-form-item prop="captcha">
					<view class="re_VerificationCode">
						<view style="margin-right: 10rpx;">
							{{ $t('验证码') }}
						</view>
						<u-input type="number" v-model="model.captcha" :placeholder="$t('请输入验证码')" :border="border" />
						<view style="color: #8C8C8C;" @click.stop="sendVerificationCode">
							<!-- <view class="re_line"></view> -->
							<view>{{ isCounting ? `${countdown}S` : $t('获取验证码') }}</view>
						</view>
					</view>
				</u-form-item>

			</u-form>
		</view>

		<view class="log_group">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="log_u-checkbox">
					<u-checkbox active-color="#278AFF" @change="checkboxChange" v-model="item.checked"
						v-for="(item, index) in list" :key="index" :name="item.name" size="28rpx">
					</u-checkbox>
					<view style="font-size: 25rpx;margin-left: -20rpx;">
						<span>阅读并同意</span>
						<span style="color: #16C186;">《GULZ用户</span>
						<span style="color: #16C186;" @click.stop="handeleLink">{{ $t('服务协议') }}</span>
						<span style="color: #16C186;">{{ $t('和') }}</span>
						<span style="color: #16C186;" @click.stop="handeleAgreement">{{ $t('隐私政策') }}》</span>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<!-- 注册按钮 -->
		<view class="re_but">
			<view style="width: 90%;">
				<u-button class="custom-style" :disabled="isDisabled" :loading="isLoading" @click="handelSubmit">
					{{ $t('确认') }}
				</u-button>
			</view>
		</view>
		<!-- <view class="existence" @click="handelAlreadyhaveanaccount">{{$t('已有帐号，立即前往登录')}}</view> -->
		<!-- 底部弹窗 -->
		<u-picker v-model="iSshow" mode="selector" :range="selectorObj" range-key="name" :confirm-text="$t('确定')"
			:cancel-text="$t('取消')" @confirm="handelConfirm" :default-selector="[AreaCodeIndex]" />
		<!-- <view class="backColor"></view> -->
	</view>
</template>

<script>
import {
	IMAGE_URL,
	HTTP_IMG_UTL
} from "@/config/app";
export default {
	data() {
		return {
			HTTP_IMG_UTL,
			type: 'password', //密码输入框password模式
			AreaCode: '+86', //默认选择的code
			iSshow: false, //控制底部弹窗显示与隐藏
			selectorObj: [{ //code数组
				name: '+86'
			}, {
				name: '+7'
			}], //切换语言
			isCounting: false, //短信验证码显示文字控制隐藏显示
			countdown: 60, //验证码倒计时60秒
			timer: null, //setInterval
			isDisabled: false, //disabled  防抖
			isLoading: false, //loading
			border: false, //控制隐藏input外边框
			model: { //表单
				agent_code: '', //邀请码
				mobile: '', //手机号码
				password: '', //确认密码
				newpassword: '', //再次确认密码
				captcha: '',
				email: '', //验证码
			},
			test: '测试',
			language: [{
				name: '中'
			}, {
				name: 'RU'
			}], //切换语言
			lang: 'zh', //默认语言
			indexID: 0, //下标
			nowLang: 'zh', //获取协议接口使用的当前语言
			xyContent2: '', //隐私内容
			langs: 'zh',
			AreaCodeIndex: 0,
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			list: [{ //协议选择的状态
					name: '协议',
					checked: false,
					disabled: false
				}],
		}
	},
	onShow() {
		this.nowLang = this.$i18n.locale
		this.getLang()
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
				//console.log(e);
			},
			// 判断用户是否选则协议
			getChecked() {
				// 判断用户是否选则协议
				if (!this.list[0].checked) {
					uni.showModal({
						title: this.$t('温馨提示'),
						content: this.$t('登陆前请先阅读并同意GLUZ用户账号的服务协议和隐私政策'),
						cancelText: this.$t('不同意'), // 取消按钮的文字  
						confirmText: this.$t('同意'), // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#DB9C28',
						cancelColor: '#656565',
						success: (res) => {
							if (res.confirm) {
								this.list[0].checked = true
								// 调用登录接口进行登录
								this.Submit()
								console.log('comfirm') //点击确定之后执行的代码
							} else {
								this.list[0].checked = false
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				} else {
					// 如果协议为真直接调接口
					this.Submit()
				}
			},
		// 提交注册
		handelSubmit() {
			const regex = /^[1][3-9][0-9]{9}$/;
			if (this.model.mobile === '') {
				uni.showToast({
					title: this.$t('请输入手机号'),
					icon: 'none',
					duration: 1000
				})
			} else if (this.lang === 'zh') { //如果是中国用户判断
				if (!regex.test(this.model.mobile)) { //正则判断手机号是否正确
					uni.showToast({
						title: this.$t('手机号码不正确'),
						// title:'手机号码不正确',
						icon: 'none',
						duration: 1000
					})
				}  else if (this.model.password.length < 8) { //判断密码是否大于8位
					uni.showToast({
						title: this.$t('密码长度必须大于8位'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.newpassword.length < 8) {
					uni.showToast({
						title: this.$t('密码长度必须大于8位'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.password !== this.model.newpassword) {

					uni.showToast({
						title: this.$t('两次密码不一致'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.captcha === '') { //判断验证码是否为空
					uni.showToast({
						title: this.$t('请输入验证码'),
						icon: 'none',
						duration: 1000
					})
				} else {
					this.getChecked()

				}
			} else if (this.lang === 'ru') { //如果是俄罗斯用户判断
				if (this.model.mobile.length !== 10) { //正则判断手机号是否正确
					uni.showToast({
						title: this.$t('手机号码不正确'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.password.length < 8) { //判断密码是否大于8位
					uni.showToast({
						title: this.$t('密码长度必须大于8位'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.newpassword.length < 8) {
					uni.showToast({
						title: this.$t('密码长度必须大于8位'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.password !== this.model.newpassword) {

					uni.showToast({
						title: this.$t('两次密码不一致'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.captcha === '') { //判断验证码是否为空
					uni.showToast({
						title: this.$t('请输入验证码'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.model.email === '') { //判断邮箱是否为空
					uni.showToast({
						title: this.$t('请输入邮箱'),
						icon: 'none',
						duration: 1000
					})
				} else {
					this.getChecked()

				}
			}

		},
		// 调注册接口
		Submit() {
			this.isDisabled = true
			this.isLoading = true
			this.$u.api.user.resetpwd({
				mobile: this.model.mobile,
				email: this.model.email,
				// type: this.form.country === '0' ? 'mobile' : 'mobile', //拷贝过来原始代码是这样写的，有点der
				type: 'mobile',
				country: this.lang === 'zh' ? '0' : '1',
				newpassword: this.model.newpassword,
				captcha: this.model.captcha
			}).then(res => {
				this.isDisabled = false
				this.isLoading = false
				this.$u.toast(this.$t('操作成功'))
				setTimeout(() => {
					this.$u.route({
						url: '/pages/user/login/login',
					})
				}, 1500)
			}).catch(err => {
				this.isDisabled = false
				this.isLoading = false
			})
		},
		// 选择区号
		handeleAreaCode() {
			// 控制底部弹窗的弹出与收起
			this.iSshow = !this.iSshow
		},
		checkboxGroupChange() {

		},
		// 选择语言
		handelConfirm(e) {
			this.AreaCodeIndex = e[0]
			// let index = e[0]
			// 获取选择的下标
			// this.indexID = index
			// 根据下标切换选择的+86或+7
			this.AreaCode = this.selectorObj[e[0]].name

			if (this.AreaCode == '+86') {
				this.indexID = 0

			}
			if (this.AreaCode == '+7') {
				this.indexID = 1

			}


		},
		// 点击获取短信验证码文字
		sendVerificationCode() {
			// 判断手机号是否为空
			if (this.model.mobile === '') {
				this.$u.toast(this.$t('请输入手机号'));
				return
			}
			if (this.isCounting) return;
			this.getPhoneNumberCode() //调接口发送短信

		},
		// 验证码倒计时逻辑
		startCountdown() {
			this.isCounting = true;
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					clearInterval(this.timer);
					this.isCounting = false;
					this.countdown = 60;
				}
			}, 1000);
		},
		// 调接口发送短信验证码
		getPhoneNumberCode() {
			let data = {
				mobile: this.AreaCode === '+86' ? this.model.mobile : this.AreaCode.slice(1) + this.model.mobile, //手机号码
				event: this.lang === 'zh' ? 'resetpwd' : 'resetpwd_ru', //事件名称：注册=register，重置密码=resetpwd
				langs: this.lang,
				email: this.model.email
			}
			// 调用发送验证码接口 'sendCaptcha'
			this.$u.api.user.sendCaptcha(data).then(res => {
				// 验证码倒计时逻辑
				this.startCountdown();
			})
		},
		// 切换语言
		handelLang(index) {
			// 设置手机号选择的+86或+7
			this.AreaCode = this.selectorObj[index].name
			this.indexID = index;
			// 切换语言
			if (index === 0) {
				this.lang = 'zh'
				this.langs = 'zh'
			} else {
				this.lang = 'ru'
				this.langs = 'ru'
			}
			/** 设置语言 */
			uni.setStorage({
				key: 'lang',
				data: this.lang
			})
			// 更新语言
			getApp().globalData.lang = this.lang
			this.$i18n.locale = this.lang
		},
		// 返回上一页
		handelReturn() {
			uni.navigateBack()
		},
		// 获取当前缓存语言
		getLang() {
			uni.getStorage({
				key: 'lang',
				success: res => {
					if (res.data == 'zh') {
						this.indexID = 0
						this.lang = 'zh'
						this.AreaCode = '+86';
					} else {
						this.indexID = 1
						this.lang = 'ru'
						this.AreaCode = '+7';
					}
				}
			});
		},
		// 跳转至服务协议页面
		handelePrivacy() {
			this.$u.route({
				url: '/pages/user/privacy/privacy',
				params: {
					type: 'GLUZ用户账号服务协议'
				}
			})
		},
		// 跳转至隐私政策
		showXy2() {
			this.$u.api.basic.getContentData({
				type: "隐私政策",
				nowLang: this.nowLang
			}).then(res => {
				this.xyContent2 = res
			})
			// this.showPopup2 = true
		},
		// 已有账号
		handelAlreadyhaveanaccount() {
			uni.navigateBack()
		}

	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}

}
</script>


<style lang="scss" scoped>
.backColor {
	width: 100%;
	height: 400rpx;
	background-image: url('/static/img/bg_1.png');
	background-size: cover;
	position: absolute;
	top: 0;
	z-index: -1;
}

.existence {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #A4A4A4;
	margin-top: 28rpx;
	margin-bottom: 138rpx;
}

.re_mobile_87 {
	margin-right: 14rpx;
}

.re_mobile {
	width: 100%;
	display: flex;
	align-items: center;

	.ico {
		flex-shrink: 0;
		width: 39rpx;
		height: 26rpx;
		margin-right: 10rpx;
		// margin-top: 6rpx;
	}
}

.re_ver {
	width: 210rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.re_line {
	width: 2rpx;
	height: 30rpx;
	// background-color: #FF4E00;
	background: #000000;
}

.re_VerificationCode {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.custom-style {
	background: linear-gradient(to left, #64D4E3, #2A8EFE);
	border-radius: 80rpx;
	color: #ffffff;
	height: 100rpx;
	box-shadow: 0 25rpx 26rpx #daeef7;
	border: 0;
}

.re_but {
	margin: 124rpx 0rpx 0rpx 0rpx;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.re_Privacy {
	width: calc(100% - 80rpx);
	display: flex;
	margin-top: 20rpx;
	justify-content: flex-start;
	align-items: center;
	font-size: 20rpx;
	flex-wrap: wrap;
}

.re_form {
	width: calc(100% - 80rpx);
}

.active {
	color: #A5A5A5;
	width: 116rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	border: 1rpx solid #E2E2E2;
	border-radius: 10rpx;
}

.itemActive {
	width: 116rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid #707070;
	border-radius: 10rpx;
	color: #FFFFFF;
	background: linear-gradient(to right, #d2ef91, #e6f5cd)
}

.re_lang_ri {
	width: 250rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
}

.re_lang {
	margin-top: 68rpx;
	width: calc(100% - 100rpx);
	display: flex;
	justify-content: flex-end;
}

.re_GLUZ_title {
	margin-top: 8rpx;
	width: calc(100% - 80rpx);
	// height:60rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 70rpx;
}

.re_return {
	width: calc(100% - 60rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
	padding: 26rpx 0;
}

.re_content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	// background-color: #ffffff;
}
.log_group {
	margin: 50rpx 0 10rpx 0;
	text-align: left;
	width: 100%;
	padding-left: 34rpx;
}
.log_u-checkbox {
		width: 100%;
		display: flex;
		align-items: center;
	}
</style>